<template>
  <div class="app-container">
    <!-- 搜索 -->
    <div class="filter-container">
      <el-form :model="filter" :inline="true" size="medium">
        <el-form-item label="">
          <el-input placeholder="Eamil" v-model="filter.email" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="用户名称" v-model="filter.name"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
          ></el-button>
          <el-button
            type="primary"
            @click="resetForm"
            icon="el-icon-refresh"
          ></el-button>
          <el-button
            type="success"
            plain
            @click="add()"
            icon="el-icon-plus"
          ></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-container" v-loading="listLoading">
      <el-table
        :data="list"
        border
        style="width: 100%"
        row-key="id"
        :header-cell-class-name="headerStyle"
        size="medium"
      >
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column width="80px" prop="avatar" label="头像">
          <template slot-scope="{ row }">
            <img class="user-avatar" :src="row.avatar" />
          </template>
        </el-table-column>

        <el-table-column prop="email" label="邮箱">
          <template slot-scope="{ row }">
            <span>{{ row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="角色">
          <template slot-scope="{ row }">
            <el-tag
              style="margin: 0px 2px 0px 2px"
              v-for="role in row.roles_node"
            >
              {{ role.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="添加时间">
          <template slot-scope="{ row }">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column label="method" width="250px">
          <template slot-scope="{ row }">
            <el-button
              @click="edit(row)"
              type="primary"
              icon="el-icon-edit-outline"
            ></el-button>
            <!-- <el-button @click="del(row)" type="danger" icon="el-icon-delete"></el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form ref="editForm" :model="form" label-width="100px">
        <el-form-item label="用户名称: " :required="true" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="用户邮箱: " :required="true" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="密码: " prop="password" :required="true">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码: " prop="password" :required="true">
          <el-input
            v-model="form.password_confirmation"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="赋予角色" prop="roles[]">
          <el-select
            v-model="form.roles"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择角色"
            value-key="name"
          >
            <el-option
              v-for="item in allRole"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item fixed="right">
          <el-button @click="submit()" class="btn-success">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import layoutMinix from "../../layout/components/mixins/layout";
import Pagination from "@/components/Pagination/index";
import { getUserList, addUser, updateUser } from "../../api/auth";
import { allRole } from "../../api/role";

export default {
  name: "UserPermission",
  components: { Pagination },
  mixins: [layoutMinix],
  data() {
    return {
      list: [],
      mate: [],
      listLoading: false,
      page: undefined,
      form: {
        id: undefined,
        name: null,
        email: null,
        avatar: null,
        password: undefined,
        password_confirmation: undefined,
        roles: [],
      },
      dialogVisible: false,
      title: undefined,
      allRole: [
        {
          id: 0,
          name: "无权限",
        },
      ],
      filter: {
        email: undefined,
        name: undefined,
      },
    };
  },
  methods: {
    headerStyle({ row, rowIndex }) {
      return "table-th";
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getList(params = {}) {
      this.listLoading = true;
      params = Object.assign(params, this.filter);
      getUserList(params).then((response) => {
        const { list, mate } = response.data;
        this.list = list;
        this.total = mate.total;
        this.page = mate.page;
        this.pageSize = mate.pageSize;
      });
      this.listLoading = false;
    },
    getAllRole() {
      allRole().then((response) => {
        const { data } = response;
        this.allRole = data;
      });
    },
    add() {
      this.getAllRole();
      this.title = "添加用户";
      this.dialogVisible = true;
    },
    submit() {
      if (this.form.id != undefined) {
        updateUser(this.form).then((response) => {
          this.$message.success(response.message);
          this.getList();
          this.dialogVisible = false;
        });
      } else {
        addUser(this.form).then((response) => {
          if (response.code == 200) {
            this.$message({
              type: "success",
              message: response.message,
              duration: 5 * 1000,
            });
            this.getList();
            this.dialogVisible = false;
          }
        });
      }
    },
    async edit(item) {
      await this.getAllRole();
      this.form = Object.assign(item, {
        name: item.name,
        roles: item.roles_node,
        id: item.id,
      });
      console.log(item.roles_node);
      // this.checkedRoles = item.roles_node;
      this.title = "编辑用户 | " + item.name;
      this.dialogVisible = true;
    },
    search() {
      this.getList();
    },
    resetForm() {
      //this.searchCodeList = []
      this.filter = [];
      this.getList();
    },
    async del(item) {},
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss">
.user-avatar {
  height: 40px;
  width: 40px;
}
</style>
